<template>
    <div>
        <van-list class="movie_ul"
                  v-model="loading"
                  :finished="finished"
                  finished-text="我是有底线的"
                  @load="onLoad"
                  :immediate-check="false"
                  offset="200"
        >
            <van-cell v-for="item in movelist" :key="item.filmId" class="movie_ul_li" @click.stop="to_detail(item)">
                <img :src="item.poster">
                <ul class="message_and_buy">
                    <li class="message">
                        <div class="title_and_type">
                            <div class="title">{{item.name}}</div>
                            <div class="type">{{item.item.name}}</div>
                        </div>
                        <div class="grade">
                            <span>观众评分</span>&nbsp;<span style="color: orange;">{{item.grade}}</span>
                        </div>
                        <div class="actor">
                                主演:{{item.actors | concatname}}
                        </div>
                        <div class="area_and_time">
                                中国大陆 | {{item.runtime}}分钟
                        </div>
                    </li>
                    <li class="buy">
                        <button>购票</button>
                    </li>
                </ul>
            </van-cell>
        </van-list>
    </div>
</template>

<script>
    import Vue from 'vue'
    import axios from 'axios'
    import {List,Cell} from 'vant'
    Vue.use(List).use(Cell)
    Vue.filter('concatname',(actors)=>{
        if(actors === undefined){return '暂无主演'}
        return actors.map(item=>item.name).join(' ');
    });
    export default {
        name: "nowplaying",
        data(){
            return {
                movelist:[],
                loading:false,
                finished:false,
                current:1,
                total:0,
                templist:[],
            }
        },
        mounted() {
            console.log('在nowplaying中',this.$store.state.cityName)
            console.log('在nowplaying中',this.$store.state.cityID)
            axios({
                url:`https://m.maizuo.com/gateway?cityId=${this.$store.state.cityID}&pageNum=1&pageSize=10&type=1&k=67703`,
                headers:{
                    'X-Client-Info':' {"a":"3000","ch":"1002","v":"5.0.4","e":"16132646121989188333338625","bc":"310100"}',
                    'X-Host':' mall.film-ticket.film.list',
                }
            }).then(res=>{
                console.log(res.data.data.films);
                this.movelist=res.data.data.films;
                this.total=res.data.data.total;
                console.log('总共是',res.data.data.total);
                this.$bus.emit('img_to_swiper',res.data.data.films);
            })
        },
        methods:{
            to_detail(item){
                console.log('zai to detail zhong ')
                this.$router.push({path:`/detail?filmId=${item.filmId}`});
            },
            onLoad(){
                console.log('到底了')
                console.log('当前数组长度,',this.movelist.length)
                console.log('总长度',this.total)
                if(this.templist.length === this.total && this.templist.length !== 0){
                    this.finished=true;
                    return 0;
                }
                this.current++;
                axios({
                    url:`https://m.maizuo.com/gateway?cityId=${this.$store.state.cityID}&pageNum=${this.current}&pageSize=10&type=1&k=67703`,
                    headers:{
                        'X-Client-Info':' {"a":"3000","ch":"1002","v":"5.0.4","e":"16132646121989188333338625","bc":"310100"}',
                        'X-Host':' mall.film-ticket.film.list',
                    }
                }).then(res=>{
                    console.log(res.data.data.films);
                    this.templist=[...this.movelist,...res.data.data.films];
                    // this.movelist=[...this.movelist,...res.data.data.films];
                    this.movelist=this.templist;
                    // this.movelist=this.movelist.concat(res.data.data.films);
                    this.loading=false;
                })
            }
        },
    }
</script>

<style scoped>
        ul,li{list-style: none;}
        /*.movie_ul{width: 100%}*/
        /*.movie_ul_li{width: calc(100% - 24px);height: 97px;border-top: solid 3px #fbfbfb;margin: 0 12px;display: flex;}*/
        .van-cell__value{display: flex;}
        img{display: block;width: 55px;height: 75px;}
        .message_and_buy{display: flex;flex-grow: 1;margin-left: 10px;margin-top: 2px;height: 78px;justify-content: space-between;}
        .message{display: flex;flex-direction: column;justify-content: space-between;width: 185px;}
        .message>div{flex-grow: 1;}
        .title_and_type{display: flex;height: 12px;}
        .title{font-size: 12px;line-height: 12px;color: black;}
        .type{width: 17px;height: 11px;background: #d2d6dc;margin-left: 4px;margin-top: 1px;text-align: center;font-size: 8px;line-height: 8px;padding-top: 2px;}
        .grade>span{font-size: 10px;line-height: 10px;}
        .grade>span:nth-of-type(1){color: #bea8b6;}
        .actor{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
        .actor,.area_and_time{font-size: 10px;color:  #bea8b6;line-height: 10px;}
        .buy{width: 38px;height: 18px;border: solid 2px #ffdfd0;color: orange;font-size: 10px;text-align: center;line-height: 18px;align-self: center;}
        .buy>button{outline: none;width: 100%;height: 100%;border: none;color: inherit;}
</style>